<template>
  <div class="components-container" >
    <div v-if="dialogFormVisible==false" style="overflow: hidden">
      <div class="topClass">
        <div class="topLeft">
          <div class="personInfo">
            <img class="infoImg" v-if="avatar" :src="$store.state.apiUrl+'file/'+avatar" alt="">
            <img class="infoImg" v-else src="../../static/img/nopersonHead.jpg" alt="">
            <div class="infoDiv">
              <p>{{name}}</p>
              <p class="phoneIcon" /><p>{{phone}}</p>
            </div>
          </div>
          <hr style="background: rgba(232,232,232,1);width: 100%;height: 0.1px;"><!--横向分割线-->
          <ul class="personMoney">
            <li class="personMoneyLi">
              <p class="personMoneyP">签约总金额</p>
              <span class="personMoneySpan">{{userMoneyList.qySumCommission}}</span>
            </li>
            <hr style="width:0.1px;background:rgba(232,232,232,1);margin: 36px 0px;height:45%;"><!--竖向分割线-->
            <li class="personMoneyLi">
              <p class="personMoneyP">结算总金额</p>
              <span class="personMoneySpan">{{userMoneyList.jsSumCommission}}</span>
            </li>
            <hr style="width:0.1px;background:rgba(232,232,232,1);margin: 36px 0px;height: 45%;"><!--竖向分割线-->
            <li class="personMoneyLi">
              <p class="personMoneyP">动态总金额</p>
              <span class="personMoneySpan">{{userMoneyList.dtSumCommission}}</span>
            </li>
            <hr style="width:0.1px;background:rgba(232,232,232,1);margin: 36px 0px;height: 45%;"><!--竖向分割线-->
            <li class="personMoneyLi">
              <p class="personMoneyP">已支出金额</p>
              <span class="personMoneySpan">{{userMoneyList.zfSumCommission}}</span>
            </li>
            <hr style="width:0.1px;background:rgba(232,232,232,1);margin: 36px 0px;height: 45%;"><!--竖向分割线-->
            <li class="personMoneyLi">
              <p class="personMoneyP">未支出金额</p>
              <span class="personMoneySpan">{{userMoneyList.nzfSumCommission}}</span>
            </li>
          </ul>
          <!--设置-->
          <div class="setUp" @click="setUp" />
        </div>
        <div class="topRight">
          <header class="theheader">订单信息</header>
          <ul class="topRightUl">
            <li class="topRightLi">
              <p class="topRightP">待发布订单</p>
              <hr style="width:0.1px;background:rgba(232,232,232,1);height:76%;display: inline-block;  float: left;"><!--竖向分割线-->
              <span class="topRightSpan">{{userOrderList.beReleasedOrder}}</span>
            </li>
            <hr style="background: rgba(232,232,232,1);width: 100%;height: 0.1px;"><!--横向分割线-->
            <li class="topRightLi">
              <p class="topRightP">进行中订单</p>
              <hr style="width:0.1px;background:rgba(232,232,232,1); height: 70%;margin: 10px 0px;display: inline-block;  float: left;"><!--竖向分割线-->
              <span class="topRightSpan">{{userOrderList.hasReleasedOrder}}</span>
            </li>
            <hr style="background: rgba(232,232,232,1);width: 100%;height: 0.1px;"><!--横向分割线-->
            <li class="topRightLi">
              <p class="topRightP">已完成订单</p>
              <hr style="width:0.1px;background:rgba(232,232,232,1);height: 70%;margin: 10px 0px;display: inline-block;  float: left;"><!--竖向分割线-->
              <span class="topRightSpan">{{userOrderList.completedOrder}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottomClass">
        <header class="theheader" style=" padding: 0px 30px;">进行中订单</header>
        <ul v-loading="listLoading" class="bottomUl">
          <hr style="background: rgba(232,232,232,1);width: 100%;height: 0.1px;"><!--横向分割线-->
          <li v-for="(item,index) of haveOrderData" :key="index" class="bottomLi">
            <hr v-if="index/1!=0&&index%3!=0" style="width:0.1px;background:rgba(232,232,232,1);height: 60%;margin: 28px 28px 28px 0px;display: inline-block;float: left"><!--竖向分割线-->
            <img class="bottomLiImg"  v-if="item.iocn ==''||item.iocn ==null"  src="../../static/img/noData.jpg">
            <img class="bottomLiImg"  v-else :src="$store.state.apiUrl+'file/'+item.iocn.split(',')[0]"><!--里面有多张照片，只显示第一张-->
            <div class="bottomDiv">
              <p class="bottomP">{{ item.orderName }}</p>
              <p v-if="item.dayOut>=0" class="bottomSpan b0">已施工<span class="b1">{{ item.dayOperation }}</span>天/剩余<span class="b1">{{ item.dayOut }}</span>天</p>
              <p v-if="item.dayOut<0" class="bottomSpan b0">已施工<span class="b2">{{ item.dayOperation }}</span>天/超期<span class="b2">{{ Math.abs(item.dayOut) }}</span>天</p>
              <p class="bottomSpan b3">{{ item.clUserNames }}</p>
            </div>
          </li>
        </ul>
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          style="text-align: center ;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- &lt;!&ndash;个人信息&ndash;&gt;
    <el-dialog
      title="个人中心信息"
      :visible.sync="dialogFormVisible"
      width="820px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelForm"
      class="dialogPublic"
    >
      <el-form ref="dialogForm" :rules="rulesForm" :model="dialogForm" class="formPublic">
        <div class="personLeft">
           <header class="theheader" >账号管理</header>
          <img class="leftImg" src="./image/phoneIcon.png">
          <span class="lefthr"></span><span class="leftSpan">账号信息</span>
        </div>
        <div  class="personRight">
          <el-form-item prop="headPortrait" label="用户头像:">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img  :src="dialogForm.headPortrait" class="avatar">
              <el-button size="small" class="personButton" >点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item prop="accountNumber" label="账号:">
            <span >{{dialogForm.accountNumber}}</span>
            <el-button class="personButton">修改密码</el-button>
          </el-form-item>
          <el-form-item prop="nickname" label="昵称:">
            <el-input
              v-model="dialogForm.nickname"
              class="dialoginput"
              placeholder="请输入昵称"
              auto-complete="off"
              style="width:216px"
            />
          </el-form-item>
          <el-form-item label="姓名:" prop="fullName">
            <el-input
              v-model="dialogForm.fullName"
              class="dialoginput"
              placeholder="请输入姓名"
              auto-complete="off"
              style="width:216px"
            />
          </el-form-item>
            <el-form-item prop="phone" label="手机号码:">
              <el-input
                v-model="dialogForm.phone"
                class="dialoginput"
                placeholder="请输入手机号码"
                auto-complete="off"
                style="width:216px"
              />
              <el-button class="personButton">修改绑定</el-button>
            </el-form-item>
          <el-form-item label="简介:" prop="briefIntroduction">
            <el-input v-model="dialogForm.briefIntroduction" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入简介" style="width:216px" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="setForm">保存</el-button>
        <el-button @click="cancelForm">取消</el-button>
      </div>
    </el-dialog>-->
    <person-info v-if="dialogFormVisible" :person="person" @fanhui="personInfoClick" />
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import personInfo from './personInfo'
import {userInfo,userMoneyList,userOrderList,orderList} from '@/api/article'
export default {
  name: 'PersonalCenter',
  components: { personInfo },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'phone',
    ])
},
  data() {
    return {
      /* ***************** 个人信息订单统计查询**********************/
      userOrderList:{
        beReleasedOrder:0,//待发布订单
        hasReleasedOrder:0,//进行中订单
        completedOrder:0,//已完成订单
      },
      /* ***************** 个人信息订单统计结束**********************/
      /* ***************** 个人信息金额统计查询**********************/
      userMoneyList:{},
      /* ***************** 个人信息金额统计结束**********************/
      /* ***************** 进行中订单查询**********************/
      listLoading: true,
      currentPage: 1,
      pageSize: 6,
      total: 0,
      haveOrderData: [
        {
          id: 6,
          orderName: '江干区金色大唐城 4-1003室内装修', // 订单名称
          daysRemaining: 0, // 剩余天数
          daysConstruction: 135, // 施工天数
          daysExtended: 11, // 超期天数
          orderClerk: '张三，李四，王五', // 接单员
          isTimeOut: 2// 是否超时（1-未超时；2-超时）
        }
      ], // 进行中订单数组
      /* ***************** 进行中订单查询结束**********************/
      /* 个人信息*/
      dialogFormVisible: false,
      person:{
        id:'',
        headPortrait:'',//头像
        accountNumber:'',//账号
        nickname:'',//昵称
        phone:'',//手机号码
        briefIntroduction:'',//简介
      },
      /* dialogForm:{
        id:'',
        headPortrait:'',//头像
        accountNumber:'1263744767433',//账号
        nickname:'',//昵称
        fullName:'',//姓名
        phone:'',//手机号码
        briefIntroduction:'',//简介
      },
      rulesForm:{},*/
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** ******************查询******************/
    getList() {
/*      //个人信息查询
      this. person={
          id:'',
          headPortrait:'',//头像
          accountNumber:'',//账号
          nickname:'',//昵称
          phone:'',//手机号码
          briefIntroduction:'',//简介
      }
      userInfo({}).then(res=>{
        if(res.code==1){
        this.person={
          id:res.data.user.id,
          headPortrait:[res.data.user.iocn],//头像
          accountNumber:res.data.account.account,//账号
          nickname:res.data.user.name,//昵称
          phone:res.data.user.phone,//手机号码
          briefIntroduction:res.data.user.remark,//简介
        }
        console.log(111,this.person)
      }
    })*/
      //个人信息订单统计查询
      this.userOrderList={
        beReleasedOrder:0,//待发布订单
        hasReleasedOrder:0,//进行中订单
        completedOrder:0,//已完成订单
      },
      userOrderList({}).then(res=>{
        if(res.code==1){
          this.userOrderList={
            beReleasedOrder:res.data[1]==null?0:res.data[1],//待发布订单
            hasReleasedOrder:res.data[2]==null?0:res.data[2],//进行中订单
            completedOrder:res.data[8]==null?0:res.data[8],//已完成订单
          }
      }
          console.log('待发布订单',this.userOrderList.beReleasedOrder)
    })
      //个人信息金额统计查询
      this.userMoneyList={},
      userMoneyList({}).then(res=>{
        if(res.code==1){
          this.userMoneyList=res.data
        }
      })
      //进行中订单列表
      this.listLoading = true
      this.haveOrderData=[]
      orderList({
        status:4,//施工中订单
        orderName:null,//订单名称
        clUserName:null,//接单员名称
        beginTime:null,//开始时间
        endTime:null,//结束时间
        pageNum:this.currentPage,
        pageSize:this.pageSize
        }).then(res => {
          if(res.code==1){
          this.haveOrderData = res.data.list
        console.log('订单',this.haveOrderData)
          this.total = res.data.total
          this.listLoading = false
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    /** ******************分页******************/
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    /** ******************分页结束******************/
    /** ******************设置个人信息******************/
    personInfoClick() {
      this.dialogFormVisible = false
      this.getList()

    },
    // 弹出
    setUp() {
      this.dialogFormVisible = true
      this.person={
        id:this.$store.getters.id,
        headPortrait:[this.$store.getters.avatar],//头像
        nickname:this.$store.getters.name,//昵称
        phone:this.$store.getters.phone,//手机号码
        briefIntroduction:this.$store.getters.introduction,//简介
        accountNumber:this.$store.getters.account,//账号
      }
    }
    /** ******************设置个人信息结束******************/
  }
}
</script>
<style>
</style>
<style  scoped lang="scss">
  .components-container {
    position: absolute;
    top: 0;
    left: 0;
    margin:0px 22px;
    padding: 10px 80px;
    width: 100%;
    height:100% ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .topClass{
      width: 97%;
      margin:10px 0px;
      height: 266px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      /*左側頂部*/
      .topLeft{
        position: relative;
        height: 100%;
        width: 48%;
        padding: 10px 30px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: rgba(0,0,0,0.3) 1px solid;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
        .personInfo{
          width: 100%;
          height: 45%;
          padding: 1% 5%;
          font-size:15px;
          font-family:PingFang SC;
          font-weight:600;
          color:rgba(51,51,51,1);
          display: flex;
          flex-direction: row;
          justify-content: left;
          .infoImg{
            border: rgba(0,0,0,0.3) 1px solid;
            margin-right: 23px;
            width: 96px;
            height: 96px;
            border-radius:50%;
          }
          .infoDiv{
            padding: 10px;
            width: 60%;
            height: 120px;
            p{
              height: 40px;
              line-height: 40px;
            }
            .phoneIcon{
              display: inline-block;
              float: left;
              width: 15px;
              height: 20px;
              margin: 11px 10px 14px 0px;
              background: url("./image/phoneIcon.png")no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .personMoney{
          width: 100%;
          height: 50%;
          padding: 0px 0px 10px 0px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          .personMoneyLi{
            width: 33.3%;
            padding: 25px 0px;
            text-align: center;
            overflow: hidden;
            .personMoneyP{
              height:40px;
              font-size:15px;
              font-family:PingFang SC;
              font-weight:600;
              color:rgba(51,51,51,1);
              line-height:40px;
            }
            .personMoneySpan{
              width: 100%;
              height:40px;
              line-height: 40px;
              font-size:18px;
              font-family:Arial;
              font-weight:400;
              color:rgba(44,153,236,1);
            }
            &:nth-child(5){
              /* box-shadow:2px 2px 12px #808080;
              border-radius: 22%; */
              .personMoneyP{
                font-size: 20px;
              }
              .personMoneySpan{
                font-size: 20px;
              }
            }
          }
        }

        /*右上角设置*/
        .setUp{
          cursor: pointer;
          position: absolute;
          width: 26px;
          height: 26px;
          right: 21px;
          top: 17px;
          background: url("./image/setUp.png")no-repeat;
          background-size: 100% 100%;
        }
      }
      /*右側頂部*/
      .topRight{
        border: rgba(0,0,0,0.3) 1px solid;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
        height: 100%;
        width: 50%;
        padding: 10px 30px;
        margin:0 0 0 10px;
        .topRightUl{
          height: 80%;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .topRightLi{
            height: 33.3%;
            width: 100%;
            margin: 0;
            .topRightP{
              display: inline-block;
              float: left;
              padding: 20px 0px;
              width: 20%;
              height:40px;
              font-size:15px;
              font-family:PingFang SC;
              font-weight:400;
              color:rgba(51,51,51,1);
              line-height:40px;
            }
            .topRightSpan{
              display: inline-block;
              float: left;
              text-align: center;
              padding: 20px 0px;
              width: 20%;
              height:40px;
              line-height: 40px;
              font-size:18px;
              font-family:Arial;
              font-weight:400;
              color:rgba(44,153,236,1);
            }
          }
        }
      }
    }
    .bottomClass{
      width: 97%;
      margin:10px 0px;
      height:300px;
      border: rgba(0,0,0,0.3) 1px solid;
      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
      .bottomUl{
        height: 72%;
        width: 90%;
        .bottomLi{
          padding: 16px 30px;
          width: 32%;
          height: 45%;
          display: inline-block;
          float: left;
          margin: 2px;
          display: flex;
          flex-direction: row;
          justify-content: left;
          .bottomLiImg{
            width: 110px;
            height: auto;
          }
          .bottomDiv{
            width: 60%;
            height: 100%;
            padding: 10px 0px 10px 10px;
            .bottomP{
              height:60%;
              font-size:18px;
              font-family:PingFang SC;
              font-weight:600;
              color:rgba(51,51,51,1);
              line-height:20px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .bottomSpan{
              height:20px;
              font-size:14px;
              font-family:PingFang SC;
              font-weight:400;
              line-height:15px;
            }
          }
          .b0{ color:rgba(51,51,51,1);}
          .b1{color: #50EC1F;}
          .b2{color:#FF0707;}
          .b3{color:#2C99EC;}
        }
      }
    }
  }
  /*header*/
  .theheader{
    line-height: 40px;
    text-align: left;
    width: 100%;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    font-family: 萍方-简;
    color:#000;
  }

  /*弹出个人信息*/
  .dialogPublic .personButton{
    border: 0;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(44,153,236,1);
    cursor: pointer;
  }
  .formPublic {
    display: flex;
    .personLeft{
      width:20%;display: inline-block;border:1px solid rgba(236,236,236,1);margin-right: 10px;padding-left:20px;
      .leftImg{
        width: 78px;
        height: 78px;
        display: block;
        margin-bottom: 20px;
      }
      .lefthr{
        height: 15px;
        border-right: 2px solid rgba(44,153,236,1);
        margin: 4px 11px 0px 0px;
      }
      .leftSpan{
        width:28px;
        height:20px;
        font-size:15px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(44,153,236,1);
        line-height:20px;
      }
    }
    .personRight{
      width:78%;display: inline-block;border:1px solid rgba(236,236,236,1);
    }
  }
</style>

